<template>
  <div ref="imageWrapper">
    <a-card title="查询条件" class="search">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="onSearch">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="项目名称" prop="proName">
                <a-input @click.native="openOrganModel" readOnly v-model="queryParam.proName" placeholder="请选择" />
              </a-form-model-item>
            </a-col>
            <!-- <a-col :md="6" :sm="8">
              <a-form-model-item label="期间">
                <a-range-picker v-model="dateArray" style="width: 100%" @change="handlePanelChange" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="科目编号">
                <a-tree-select
                  v-model="queryParam.subjectCode"
                  tree-data-simple-mode
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="请选择"
                  :tree-data="subjectTreeData"
                  :loadData="onLoadData"
                  allow-clear
                />
              </a-form-model-item>
            </a-col>
            <template v-if="toggleSearchStatus">
              <a-col :md="6" :sm="8">
                <a-form-model-item label="科目分类">
                  <j-dict-select-tag
                    style="width: 100%"
                    v-model="queryParam.subjectType"
                    dict-code="zxzy_subject_type"
                  />
                </a-form-model-item>
              </a-col>
            </template>
            <a-col v-for="(item, index) in listData" :key="index" :md="6" :sm="8">
              <a-form-item :label="item.fieldCnName">
                <div v-if="item.queryType === 'queryLike'">
                  <a-input v-model="item.queryValueStart"></a-input>
                </div>
                <div v-else-if="item.queryType === 'queryDate'">
                  <a-range-picker
                    v-model="dateArray"
                    style="width: 100%"
                    @change="
                      (value, dateString) => {
                        handlePanelChange(value, dateString, index)
                      }
                    "
                  />
                </div>
                <div v-else-if="item.queryType === 'queryCompare'">
                  <a-select style="width: 45%" placeholder="请选择" v-model="item.queryValueStart">
                    <a-select-option value=">">大于</a-select-option>
                    <a-select-option value="<">小于</a-select-option>
                    <a-select-option value="=">等于</a-select-option>
                    <a-select-option value=">=">大于等于</a-select-option>
                    <a-select-option value="<=">小于等于</a-select-option>
                  </a-select>
                  <a-input-number style="margin-left: 5%; width: 50%" v-model="item.queryValueEnd"></a-input-number>
                </div>
              </a-form-item>
            </a-col> -->
            <a-col :md="6" :sm="8" :offset="12">
              <span style="float: right" class="table-page-search-submitButtons">
                <a-button type="primary" @click="onSearch" icon="search" class="yellow_search_btn">查询</a-button>
                <a-button class="clear_btn" type="text" @click="searchReset" icon="reload">清除条件</a-button>
                <a-button v-if="isBackButton" type="primary" style="margin-left: 8px" @click="backUppage">
                  返回
                </a-button>
                <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 20px" class="img_css">
      <div class="Exceed_funds_map">
        <div class="title">
          <a-tooltip overlayClassName="bgc_tooltip" placement="topRight">
            <template slot="title">
              <span>{{ modelData.mxms }}</span>
            </template>
            <span @click="onSearch">
              {{ modelData.modelName || '项目部人员超编经费超预算模型' }}
              <a-icon type="strikethrough" @click.stop="showImg" />
            </span>
          </a-tooltip>
        </div>
        <div class="Exceed_funds_map_step2">
          <!-- 左 -->
          <div class="diamond" :class="{ beyond: moreperson == '1' }">
            <div class="diamond_item">
              <div class="diamond_t"></div>
              <div class="diamond-text">
                <p>项目部人员编制情况</p>
                <span>{{ MorePerson }}</span>
              </div>
            </div>
          </div>
          <!-- 中 -->
          <div class="divider_mid">
            <div class="v_divider"></div>
            <div class="h_divider"></div>
          </div>
          <!-- 右 -->
          <div class="diamond" :class="{ beyond: morebudge == '1' }">
            <div class="diamond_item">
              <div class="diamond_t"></div>
              <div class="diamond-text">
                <p>项目部经费情况</p>
                <span>{{ MoreBudget }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="Exceed_funds_map_step3">
          <div class="step3_left">
            <div class="divider">
              <div class="divider_top"></div>
              <div class="divider_mid"></div>
              <div class="div_divider">
                <div class="divider_left"></div>
                <div class="divider_right"></div>
              </div>
            </div>
            <div class="content_item">
              <div class="step3_left_left" @click="ModelSeare(1)" :class="{ active: activeIndex == 1 }">
                <div class="title">
                  {{ ModelName(0) }}
                </div>
                <div class="count">
                  {{ Modelextrnum(0) }}
                </div>
                <a-icon type="caret-down" class="logo" />
              </div>
              <div class="step3_left_right" :class="{ active: activeIndex == 2 }" @click="ModelSeare(2)">
                <div class="title">
                  {{ ModelName(1) }}
                </div>
                <div class="count">
                  {{ Modelextrnum(1) }}
                </div>
                <a-icon type="caret-down" class="logo" />
              </div>
            </div>
          </div>
          <div class="step3_left">
            <div class="divider">
              <div class="divider_top"></div>
              <div class="divider_mid"></div>
              <div class="div_divider">
                <div class="divider_left"></div>
                <div class="divider_right"></div>
              </div>
            </div>
            <div class="content_item">
              <div class="step3_left_left" :class="{ active: activeIndex == 3 }" @click="ModelSeare(3)">
                <div class="title">
                  {{ ModelName(2) }}
                </div>
                <div class="count">
                  {{ Modelextrnum(2) }}
                </div>
                <a-icon type="caret-down" class="logo" />
              </div>
              <div class="step3_left_right" :class="{ active: activeIndex == 4 }" @click="ModelSeare(4)">
                <div class="title">
                  {{ ModelName(3) }}
                </div>
                <div class="count">
                  {{ Modelextrnum(3) }}
                </div>
                <a-icon type="caret-down" class="logo" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <!-- v-if="dataSource == []" -->
    <a-card style="margin-top: 20px">
      <template slot="title"><span style="font-weight: bold">经费支出</span></template>
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        size="middle"
        rowKey="id"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        class="antableClass"
      >
        <span slot="action" slot-scope="text, record">
          <a style="color: red" @click="handleToYD(record)">转疑点</a>
        </span>
      </a-table>
    </a-card>
    <CheckOrganModal ref="departModal" @getdata="updateQueryParam"></CheckOrganModal>
    <BusinessChart ref="businesschart" :flowimg="flowimg" />
    <YDModel ref="YDModel" :routerData="$route.path" />
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { YzzxListMixin } from '../../../sjxmzygl/yzzx/mixins/YzzxListMixin'
import CheckOrganModal from '../../common/CheckOrganModal'
import BusinessChart from './BusinessChart'
import { base64toImg } from '@/mixins/base64toImg'
import YDModel from '@/views/sj/components/YDModel'
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import jumpConfigMixin from '@/views/sj/sjxmzygl/sjxmss/jumpConfigMixin'
import { columns1, columns2, columns3, columns4, columns5 } from './columns'
import moment from 'moment'
export default {
  name: 'ye1',
  mixins: [JeecgListMixin, YzzxListMixin, base64toImg, jumpConfigMixin],
  components: { CheckOrganModal, BusinessChart, YDModel },
  data() {
    return {
      queryParam: {
        extraId: '',
        proName: '',
        modelId: '',
      },
      isBackButton: false,
      superParam: {
        id: '756be7d7fb510292cce689b3606c945d',
        extraFlag: true,
      },
      disableMixinCreated: true,
      listData: [],
      modelData: {},
      activeIndex: 0,
      subjectTreeData: [],
      dateArray: ['2020-01-01', moment().format('YYYY-MM-DD')],
      endOpen: false,
      columns: [],
      url: {
        list: '/sjmx/queryMorePersonBudget',
        model: '/dataModel/queryDataModelTemplateByExtra',
        subjectTree: '/sjyzzx/sjZxzyAccountSubject/querySubjectTree',
        getSearchAndTitle: '/dataModel/queryTitleAndSearch',
      },
      modelDataSource: [],
      morebudge: '',
      moreperson: '',
      rules: {
        proName: { required: true, message: '请选择项目名称', trigger: 'change' },
      },
      visible: false,
    }
  },
  watch: {
    $route: {
      handler: function (to) {
        if (Object.keys(to.query).length) {
          this.disableMixinCreated = true
          let activeIndex = to.query.activeIndex1
          to.query.activeIndex1 && delete to.query.activeIndex1
          this.queryParam = Object.assign(this.queryParam, to.query)
          this.activeIndex = activeIndex
          this.$nextTick(async () => {
            this.ModelSeare(this.activeIndex)
          })
        } else if (Object.keys(to.params).length && to.params.from == 'sjxmss') {
          let { projName, proId } = to.params
          this.queryParam.proId = proId
          this.queryParam.proName = projName
          this.queryParam.extraId = proId
          this.isBackButton = true
          this.returnRecord = to.params.returnRecord

          this.$nextTick(() => {
            // 这可能存在问题
            this.onSearch()
          })
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getSubjectTree()
  },
  computed: {
    MoreBudget() {
      this.morebudge = this.modelData && this.modelData.extraMap && this.modelData.extraMap.ifMoreBudget
      return this.morebudge == '1' ? '超预算' : '正常'
    },
    MorePerson() {
      this.moreperson = this.modelData && this.modelData.extraMap && this.modelData.extraMap.ifMorePerson
      return this.moreperson == '1' ? '超编制' : '正常'
    },
    flowimg() {
      let url = `${window._CONFIG['domianURL']}/sys/common/static/${this.modelData.mxUrl}`
      console.log('url', url)
      return url
    },
  },
  filters: {
    modelName(val) {
      return val ? val : '经费支出'
    },
  },
  methods: {
    ModelName(num) {
      let modelInit = ['项目人数', '编制人数', '经费支出', '经费预算']
      return (
        (this.modelDataSource && this.modelDataSource[num] && this.modelDataSource[num].modelName) || modelInit[num]
      )
    },
    Modelextrnum(num) {
      return (this.modelDataSource && this.modelDataSource[num] && this.modelDataSource[num].extraNum) || 0
    },
    async ModelSeare(num = 1) {
      this.dataSource = []
      this.queryParam.modelId = this.modelDataSource[num] && (this.modelDataSource[num].id || '')
      this.activeIndex = num
      this.getTitleconfig(num)
      // 获取模型的数据
      await this.getModelData()
      await this.loadData(1)
    },
    //  设置表头
    getTitleconfig(num) {
      switch (Number(num)) {
        case 0:
          this.url.list = '/sjmx/queryMorePersonBudget'
          this.columns = columns1(this)
          break
        case 1:
          this.url.list = '/sjmx/queryProPersonNum'
          this.columns = columns2(this)
          break
        case 2:
          this.url.list = '/sjmx/queryLabrPersonNum'
          this.columns = columns3(this)
          break
        case 3:
          this.url.list = '/sjmx/queryProBudget'
          this.columns = columns4(this)
          break
        case 4:
          this.url.list = '/sjmx/queryProAppExpend'
          this.columns = columns5(this)
          break
        default:
          break
      }
    },
    searchReset() {
      this.queryParam = {
        extraId: '',
        proName: '',
        modelId: '',
      }
      this.morebudge = ''
      this.moreperson = ''
      this.modelDataSource = []
      this.modelData = {}
      this.columns = []
      this.activeIndex = 0
    },
    updateQueryParam(data) {
      this.queryParam.extraId = data.proId
      this.queryParam.proId = data.proId
      this.queryParam.proName = data.proName
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    loadData(arg) {
      return new Promise((reslove, reject) => {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }
        var params = this.getQueryParams() //查询条件
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            reslove()
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
          reject()
        })
      })
    },
    onSearch() {
      return new Promise((reslove, reject) => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            this.queryParam['modelId'] = '756be7d7fb510292cce689b3606c945d'
            this.activeIndex = 1
            this.getTitleconfig(this.activeIndex)
            // 获取模型的数据
            await this.getModelData()
            // 获取数据
            await this.loadData(1)
            reslove()
          }
        })
      })
    },
    //查询
    getModelData() {
      return new Promise((reslove, reject) => {
        var params = this.getQueryParams() // 查询条件
        this.loading = true
        getAction(this.url.model, params).then((res) => {
          if (res.success) {
            this.modelDataSource = res.result.records || res.result
            this.modelData = this.modelDataSource.shift()
            reslove()
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
          reject()
        })
      })
    },
    showImg() {
      console.log(Object.keys(this.modelData).length)
      if (Object.keys(this.modelData).length != 0) this.$refs.businesschart.show()
      else this.$message.warning('请先配置查询条件')
    },
    handleCancel() {
      this.visible = false
    },
    handleToYD(record) {
      if (this.dataSource.length) {
        const { startTime = '', endTime = '' } = this.queryParam
        let ydnr = undefined
        let time = `【${startTime}～${endTime}】【项目部人员超编制经费超预算】`
        let param = Object.assign({ activeIndex1: this.activeIndex }, this.queryParam, )
        this.addYd(param, ydnr, time)
      } else {
        this.$message.error('空数据不能新建疑点')
      }
    },
  },
}
</script>

<style lang="less">
.bgc_tooltip {
  .ant-tooltip-inner {
    // 这里是框框
    border-radius: 20px;
    color: #333;
    width: 400px;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.274) !important;
  }
  .ant-tooltip-arrow::before {
    // 这里是小三角形
    background-color: #fff !important;
  }
}
</style>
<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';

.img_css /deep/ .ant-card-body {
  padding: 15px 15px 0 15px;
}
.Exceed_funds_map {
  width: 100%;
  position: relative;
  .title {
    // width: 350px;
    height: 50px;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    span {
      font-size: 22px;
      color: white;
      padding: 10px 35px 15px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      background-color: rgb(1, 69, 142);
    }
  }
  .Exceed_funds_map_step2 {
    width: 65%;
    margin: 0 auto;
    position: relative;
    top: -30px;
    display: flex;
    flex-direction: row;
    .divider_mid {
      width: 80%;
      padding: 0 4%;
      .v_divider {
        margin: 0 auto;
        width: 5px;
        height: 70px;
        border-left: 2px dotted rgb(1, 69, 142);
      }
      .h_divider {
        width: 96%;
        margin: 0 auto;
        flex-grow: 0.35;
        border-top: 2px dotted rgb(1, 69, 142);
      }
    }
    .diamond {
      .diamond_item {
        position: relative;
        .diamond_t {
          width: 125px;
          height: 130px;
          border: 1px solid rgb(1, 69, 142);
          transform: rotateZ(-45deg) skew(28deg, 28deg) translateX(-14px) translateY(10px);
          box-shadow: -10px 10px 0px rgb(1, 69, 142);
          background-color: rgb(231, 240, 249);
        }
        .diamond-text {
          position: absolute;
          top: 48px;
          left: -13px;
          width: 150px;
          text-align: center;
          font-size: 16px;
          font-weight: 700;
          p {
            margin-bottom: 5px;
            color: rgb(1, 69, 142);
          }
          span {
            display: inline-block;
            padding: 2px 8px;
            background-color: rgb(237, 217, 146);
            color: rgb(236, 149, 54);
            border-radius: 10px;
          }
        }
      }
    }
  }
  .Exceed_funds_map_step3 {
    position: relative;
    top: -35px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .step3_left {
      flex-grow: 0;
      flex-shrink: 0;
      width: 43.5%;
      .divider {
        width: 100%;
        .div_divider {
          display: flex;
          justify-content: space-between;
          .divider_left {
            margin: 0 auto;
            width: 5px;
            height: 12px;
            border-left: 2px dotted rgb(1, 69, 142);
          }
          .divider_right {
            margin: 0 auto;
            width: 5px;
            height: 12px;
            border-left: 2px dotted rgb(1, 69, 142);
          }
        }
        .divider_top {
          margin: 0 auto;
          width: 5px;
          height: 12px;
          border-left: 2px dotted rgb(1, 69, 142);
        }
        .divider_mid {
          margin: 0 auto;
          width: 50%;
          border-bottom: 2px dotted rgb(1, 69, 142);
        }
      }
      .content_item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .step3_left_left,
        .step3_left_right {
          width: 250px;
          height: 70px;
          border: 2px solid #000e89;
          font-size: 16px;
          font-weight: 700;
          color: white;
          text-align: center;
          cursor: pointer;
          .title {
            height: 35px;
            line-height: 30px;
            background-color: rgb(1, 69, 142);
          }
          .count {
            line-height: 30px;
            height: 31px;
            color: rgb(1, 69, 142);
          }
          .logo {
            position: relative;
            top: -5px;
            color: #fff;
          }
        }
        .step3_left_left {
          margin-left: 10px;
        }
        .step3_left_right {
          margin-right: 10px;
        }
      }
    }
    .step3_right {
      width: 50%;
      margin-right: 15px;
    }
  }
  .active {
    .title {
      background-color: rgb(236, 149, 54) !important;
    }
    .count {
      color: rgb(236, 149, 54) !important;
      background-color: rgb(253, 245, 236);
    }
    .logo {
      color: rgb(236, 149, 54) !important;
    }
    border: 2px solid #ec9536 !important;
  }
  .beyond {
    .diamond_t {
      border: 1px solid rgb(255, 88, 52) !important;
      box-shadow: -10px 10px 0px rgb(255, 88, 52) !important;
      background-color: rgb(255, 243, 243) !important;
    }
    .diamond-text {
      span {
        background-color: rgb(255, 197, 198) !important;
        color: rgb(255, 88, 52) !important;
      }
    }
  }
}
</style>